<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<h1>珠峰</h1>
            <!-- input输入框 -->
			<el-input v-model="input" placeholder="请输入内容" style="width:300px"></el-input>
			<br><br>
			<!-- 性别 -->
			<template>
			  <el-radio v-model="radio" label="男">男</el-radio>
			  <el-radio v-model="radio" label="女">女</el-radio>
			</template>
			<!-- 复选框 -->
			<h2>选择课程</h2>
			<template>
			  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
			  <div style="margin: 15px 0;"></div>
			  <el-checkbox-group v-model="checkedcourse" @change="handleCheckedCitiesChange">
			    <el-checkbox v-for="city in courses" :label="city" :key="city">{{city}}</el-checkbox>
			  </el-checkbox-group>
			</template>
			<!-- 下拉类表 -->
			<h2>爱好美食</h2>
			<template>
			  <el-select v-model="value" placeholder="请选择">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</template>
			
			<!-- 提交按钮 -->
			<br><br>
			<el-button type="primary" @click="submit">提交</el-button>
		</div>
		<!-- 先引入vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			const courseOptions = ['html', 'css', 'js'];
			new Vue({
				el:"#app",
				data:{
					input: '',
					radio: '男',
					checkAll: false,
					checkedcourse: ['html'],
					courses: courseOptions,
					isIndeterminate: true,
					options: [{
					          value: '选项1--黄金糕',
					          label: '黄金糕'
					        }, {
					          value: '选项2--双皮奶',
					          label: '双皮奶'
					        }, {
					          value: '选项3--蚵仔煎',
					          label: '蚵仔煎'
					        }, {
					          value: '选项4--龙须面',
					          label: '龙须面'
					        }, {
					          value: '选项5--北京烤鸭',
					          label: '北京烤鸭'
					        }],
					value: ''
				},
				methods: {
				      handleCheckAllChange(val) {
				        this.checkedcourse = val ? courseOptions : [];
				        this.isIndeterminate = false;
				      },
				      handleCheckedCitiesChange(value) {
				        let checkedCount = value.length;
				        this.checkAll = checkedCount === this.courses.length;
				        this.isIndeterminate = checkedCount > 0 && checkedCount < this.courses.length;
				      },
					 submit(){
						 let obj={
							 "姓名":this.input,
							 "性别":this.radio,
							 "爱好的美食":this.value,
							 "选择的课程":this.checkedcourse
						 }
						 
						 console.log(obj);
					 }
				}
			})
		</script>
	</body>
</html>
